import { useEditor, useNode, type UserComponent } from '@craftjs/core';
import { Tabs as AntTabs, type TabsProps } from 'antd';
import { useEffect } from 'react';
import { NodeBox } from '../NodeBox';
import { Settings } from './settings';

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: 'Tab 1',
    children: 'Content of Tab Pane 1',
  },
  {
    key: '2',
    label: 'Tab 2',
    children: 'Content of Tab Pane 2',
  },
  {
    key: '3',
    label: 'Tab 3',
    children: 'Content of Tab Pane 3',
  },
];

export const Tabs: UserComponent<TabsProps> = (props) => {
  const {
    actions: { selectNode },
  } = useEditor();
  const {
    connectors: { connect, drag },
    nodeId,
  } = useNode((node) => {
    return {
      nodeId: node.id,
    };
  });

  useEffect(() => {
    selectNode(nodeId);
  }, []);

  return (
    <NodeBox id={nodeId}>
      <div ref={(dom) => connect(drag(dom as HTMLDivElement))}>
        <AntTabs
          defaultActiveKey="1"
          items={items}
          onChange={onChange}
          type="card"
          {...props}
        />
      </div>
    </NodeBox>
  );
};

Tabs.craft = {
  displayName: 'Tabs',
  related: {
    settings: Settings,
  },
};
